<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
</head>

<body>
    <h2>表单标签</h2>
    <div>
        <input type="text" placeholder="外部的按钮" />
    </div>
    <!-- form 就是一个容器， -->
    <form action="https://www.baidu.com">
        <!-- input 
        通过 type 设置不同的外观 
      -->
        <div>
            <input name="username" type="text" placeholder="输入用户名" />
        </div>
        <div>
            <input name="pass" type="password" placeholder="输入密码" />
        </div>
        <div>
            <!-- 相同的 name 让浏览器知道是一组 -->
            <!-- label  for 关联指定标签的 id 属性，可以实现点字，等同于点标签 -->
            <label for="boy">男</label><input id="boy" type="radio" name="male" />
            <label for="girl">女</label>
            <input id="girl" type="radio" name="male" />
            <label for="secret">保密</label>
            <input id="secret" type="radio" name="male" />
        </div>
        <div>
            <!-- value 获取到的是数据，label 中放置的是给用户看的数据 -->
            <label for="basketball">篮球</label>
            <input id="basketball" type="checkbox" value="1" />
            <label for="sing">唱</label>
            <input id="sing" type="checkbox" value="2" />
            <label for="dance">跳</label>
            <input id="dance" type="checkbox" value="3" />
            <label for="rap">rap</label>
            <input id="rap" type="checkbox" value="4" />
        </div>
        <div>
            <!-- 文本域 -->
            <textarea placeholder="个性签名" name="" id=""></textarea>
        </div>
        <div>
            <!-- type 设置按钮的类型
          button 默认
          submit 提交，可以结合 form 表单 提交数据到指定的 url 地址，需要如果需要提交，需要给表单元素设置 name 属性
          name 等同于 key
          reset 重置表单，重置的是，所在 form 标签内部的元素
        -->
            <button type="submit">提交</button>
            <button type="reset">重置</button>
        </div>
    </form>

    <h2>度百搜索引擎</h2>
    <!-- 自己写个搜索引擎 -->
    <form action="https://www.baidu.com/s">
        <input type="text" placeholder="亲输入查询的内容" name="wd" />
        <button type="submit">去搜索</button>
    </form>

    <h2>狗 sou搜索引擎</h2>
    <!-- 自己写个搜索引擎 -->
    <form action="https://www.sogou.com/web">
        <input type="text" placeholder="亲输入查询的内容" name="query" />
        <button type="submit">去搜索</button>
    </form>
</body>

</html>